<template>
    <div class='singerinfobody' @scroll='scroll'>
        <div class='top_container'>
            <img :src='singerlistimg' alt='' class='singerimg'>
            <!--折叠面板-->
            <el-collapse :class="[titleshow==true?'fixedtitle':'list-title']">
                <!--取逗号之前的字段作为标题显示（人名(英语名)）-->
                <el-collapse-item :title="intro.slice(0,intro.indexOf('，'))">
                    <div>{{intro}}</div>
                </el-collapse-item>
            </el-collapse>
            <div :class="[titleshow==true?'empty':'']"></div>

        </div>
        <listitem :songsinfo='songsinfo'></listitem>
    </div>
</template>

<script>
  import listitem from '../player/listitem.vue'

  export default {
    name: 'singersongslist',
    data() {
      return {
        singersongslist: [],
        singerlistimg: {},
        songsinfo: [],
        intro: '',
        titleshow: false
      }
    },
    created() {
      this.getSingerInfo();
    },
    methods: {
      // 滚动事件
      scroll(e) {
        // 排行榜图片高度
        if (e.target.scrollTop >= 400) {
          this.titleshow = true;
        } else {
          this.titleshow = false;
        }
      },

      getSingerInfo() {
        this.$axios.get(this.HOST + '/singer/info/' + this.$route.params.id + '?json=true').then(res => {
          // 获取歌手信息
          this.intro = res.data.info.intro;
          //  获取歌手图片 {size}填写大小
          this.singerlistimg = res.data.info.imgurl.replace('{size}', '400');
          // 获取歌手歌曲列表
          this.singersongslist = res.data.songs.list;
          this.singersongslist.forEach(i => {
            this.$axios.get(this.HOST + '/app/i/getSongInfo.php?cmd=playInfo&hash=' + i.hash).then(res => {
              // 多加一条ERROR:需要付费，无法播放；songsinfo包含filename:歌手-歌曲名，url：歌曲地址，id:绑定key的索引，imgUrl:歌曲歌手图片(需要去掉网址中包含的'/{size}'),歌手名，歌曲名，播放时长timeLength
              this.songsinfo.push({
                'hash': i.hash,
                'error': res.data.error,
                'filename': res.data.fileName,
                'url': res.data.url,
                'id': res.data.album_audio_id,
                'imgUrl': res.data.imgUrl.replace('/{size}', ''),
                'singername': res.data.choricSinger,
                'songname': res.data.songName,
                'timeLength': res.data.timeLength
              })
            })
          })
        })
      }
    },
    components: {
      listitem
    }
  }
</script>

<style scoped>
    .singerinfobody {
        height: 100vh;
        z-index: 1999;
        overflow: auto;
        /*transition-box有pt值*/
        padding-top: 0;
        position: absolute;
        width: 100%;
    }

    .top_container {
        display: flex;
        flex-direction: column;
    }

    .singerimg {
        /*height: 14rem;*/
        overflow: scroll;
        object-fit: cover;
    }

    .singerdetail {
        position: absolute;
        top: 400px;
        background-color: #000;
        opacity: 0.4;
        width: 100%;
    }

    /*.list-title{*/
    /*color:orange;*/
    /*font-size: 0.9rem;*/
    /*padding-top: 1rem*/
    /*}*/
    .fixedtitle {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000;
        color: orange;
        font-size: 18px;
        height: 40px;
        line-height: 40px;

    }

    .list-title {
        width: 100%;
        background-color: #000;
        color: orange;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        z-index: 1999;
    }

    >>> .el-collapse-item__header {
        padding-left: 0.5rem;
    }
    .empty {
        height: 40px;
    }
</style>
